<template>
	<view class="container body">
		<view class="card">
			<view class="card-title">{{ $t('home.title.storage') }}</view>
			<view class="card-body">
				<view class="card-body-item" @click="toStorage">
					<uni-icons type="upload-filled" size='35'>

					</uni-icons>
					{{ $t('home.storage') }}
				</view>
				<view class="card-body-item" @click="toReturn">
					<uni-icons type="reload" size='35'>

					</uni-icons>
					{{ $t('home.return') }}
				</view>
				<view class="card-body-item" @click="toStockCheck">
					<uni-icons type="cart-filled" size='35'>
				
					</uni-icons>
					{{ $t('home.stockCheck') }}
				</view>
			</view>
		</view>
		<view class="card">
			<view class="card-title">{{ $t('home.title.outbound') }}</view>
			<view class="card-body">
				<view class="card-body-item" @click="toOutbound">
					<uni-icons type="download-filled" size='35'>

					</uni-icons>
					{{ $t('home.outbound') }}
				</view>
				<view class="card-body-item" @click="toPurchaseReturn">
					<uni-icons type="cart-filled" size='35'>

					</uni-icons>
					{{ $t('home.purchaseReturn') }}
				</view>
				<view class="card-body-item" @click="toObsoleteOutbound">
					<uni-icons type="cart-filled" size='35'>
				
					</uni-icons>
					{{ $t('home.obsoleteOutbound') }}
				</view>
			</view>
		</view>

    <view class="card">
      <view class="card-title">{{ $t('home.title.allocate') }}</view>
      <view class="card-body">
        <view class="card-body-item" @click="toAllocate">
          <uni-icons type="cart-filled" size='35'>

          </uni-icons>
          {{ $t('home.allocate') }}
        </view>
        <view class="card-body-item" @click="toStoreAllocate">
          <uni-icons type="cart-filled" size='35'>

          </uni-icons>
          {{ $t('home.storeAllocate') }}
        </view>
      </view>
    </view>

		<!-- <view class="card">
			<view class="card-title">{{ $t('home.language') }}</view>
			<view class="card-body">

				<view class="card-body-item" @click="onLocaleChange({ code: 'zh-Hans' })">
					<uni-icons type="navigate-filled" size='35'>

					</uni-icons>
					{{ $t('locale.zh-hans') }}
				</view>
				<view class="card-body-item" @click="onLocaleChange({ code: 'en' })">
					<uni-icons type="navigate-filled" size='35'>

					</uni-icons>
					{{ $t('locale.en') }}
				</view>

				<view class="card-body-item" @click="onLocaleChange({ code: 'fr' })">
					<uni-icons type="navigate-filled" size='35'>
					</uni-icons>
					{{ $t('locale.fr') }}
				</view>

			</view>

		</view> -->

		<view class="example-body">

			<uni-drawer ref="showRight" mode="right" :mask-click="true" @change="change($event, 'showRight')">
				<view class="drawer-body">
					<uni-section :title="`${$t('home.language')}`" type="line">
						<uDataSelect v-model="lange" :localdata="langList" placeholder="" :clear="false"
							@change="onLocaleChange"></uDataSelect>
					</uni-section>
				</view>
				<view>
					<view class="login-out-btn">
						<button type="warn" @click="onLogout">{{ $t('home.loginout.btn') }}</button>

					</view>
				</view>
			</uni-drawer>


		</view>
	</view>


</template>

<script>
	import uDataSelect from '@/components/uni-data-select/uni-data-select.vue'
	export default {
		components: {
			"uDataSelect": uDataSelect
		},
		data() {
			return {
				showRight: false,
				lange: '',
				langList: [{
						value: 'zh-Hans',
						text: this.$t('locale.zh-hans')
					},
					{
						value: 'en',
						text: this.$t('locale.en')
					},
					{
						value: 'fr',
						text: this.$t('locale.fr')
					},
				],
				isAndroid: false
			}
		},
		onLoad() {
			let systemInfo = uni.getSystemInfoSync();
			this.systemLocale = systemInfo.appLanguage;
			this.applicationLocale = uni.getLocale();
			this.lange = uni.getLocale();
			this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
			uni.onLocaleChange((e) => {
				this.applicationLocale = e.locale;
			})
		},
		computed: {
			locales() {
				return [{
						text: this.$t('locale.auto'),
						code: 'auto'
					},
					{
						text: this.$t('locale.en'),
						code: 'en'
					},
					{
						text: this.$t('locale.zh-hans'),
						code: 'zh-Hans'
					},
					{
						text: this.$t('locale.fr'),
						code: 'fr'
					},

				]
			}
		},

		methods: {
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			},
			onNavigationBarButtonTap(e) {
				console.log(e, '----e---')
				if (this.showRight) {
					this.$refs.showRight.close()
				} else {
					this.$refs.showRight.open()
				}

			},
			toStorage() {
				uni.navigateTo({
					url: '/pages/storage/index',
				})
			},
			toReturn() {
				uni.navigateTo({
					url: '/pages/return/index',
				})
			},
			toStockCheck() {
				uni.navigateTo({
					url: '/pages/stockCheck/index'
				})
			},
			toAllocate() {
				uni.navigateTo({
					url: '/pages/allocate/index'
				})
			},
      toStoreAllocate() {
        uni.navigateTo({
          url: '/pages/storeAllocate/index'
        })
      },
			toOutbound() {
				uni.navigateTo({
					url: '/pages/outbound/index',
				})
			},
			toPurchaseReturn() {
				uni.navigateTo({
					url: '/pages/purchaseReturn/index',
				})
			},
			toObsoleteOutbound() {
				uni.navigateTo({
					url: '/pages/obsoleteOutbound/index'
				})
			},
			onLocaleChange(e) {
				console.log(e, '----e---')

				if (this.isAndroid) {
					uni.showModal({
						content: this.$t('index.language-change-confirm'),
						success: (res) => {
							if (res.confirm) {
								uni.setLocale(e);
							}
						}
					})
				} else {
					uni.setLocale(e);
					this.$i18n.locale = e;
				}
			},
			onLogout() {
				uni.redirectTo({
					url: '/pages/login/index',
				})
			}
		}

	}
</script>

<style>
	body {
		background-color: gainsboro;
		height: 100%;
	}

	.card {
		background-color: white;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		/* 添加阴影 */
		border-radius: 8px;
		/* 添加圆角 */
		padding: 16px;
		/* 可选：添加内边距 */
		margin-bottom: 16px;
		/* 可选：添加外边距 */
	}

	.card-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 15px;
	}

	.card-body {
		display: flex;
		align-items: flex-start;
		/* 图标和文字垂直居中对齐 */
		margin-bottom: 8px;
	}

	.card-body-item {
		display: flex;
		flex-direction: column;
		/* 垂直方向排列子元素 */
		justify-content: center;
		/* 垂直居中 */
		align-items: center;
		/* 水平居中 */
		padding-left: 10px;
		padding-right: 10px;
	}

	.icon {
		width: 24px;
		height: 24px;
		margin-right: 8px;
		/* 图标和文字之间的间距 */
	}

	.login-out-btn {
		position: absolute;
		bottom: 0;
		padding: 15rpx;
		width: 100%;
	}

	.drawer-body {}
</style>